<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Carousel Example 1</title>
    <script src="source/moo.js"></script>
    <script src="source/switchable.js"></script>
	<link rel="stylesheet" href="reset.css" type="text/css" /> 
</head>
<body>
    <div>
        <p>
            <h1>Carousel Example 1:</h1>
        </p>
    </div>
    <style>
    .scrollable {
        position: relative;
        width: 820px;
    }
    .scrollable .prev, .scrollable .next {
        position: absolute;
        top: 50px;
        color: #666;
        cursor: pointer;
    }
    .scrollable .prev { left: 10px; }
    .scrollable .next { right: 10px; }
    .scrollable .disable { color: #ddd; cursor: default; }

    .scrollable .switchable-triggerBox {
        position: absolute;
        right: 30px;
        top: -10px;
    }
    .scrollable .switchable-triggerBox li {
        float: left;
        padding: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    .scrollable .switchable-triggerBox li.active {
        color: #C8282B;
    }

    .scroller {
        position: relative;
        width: 680px;
        height: 120px;
        border: 1px solid #ccc;
        background-color: #F9F9F9;
        margin: auto;
        overflow: hidden;
    }
    .scroller .switchable-content img {
        float: left;
        width: 100px;
        height: 75px;
        padding: 2px;
        margin: 20px 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline !important; /* fix ie6 双边距 bug */
    }
</style>
<div class="section scrollable Auto_Widget"  data-widget-type="Switchable"  data-widget-config="{effect:'scrolly', 
		viewSize: [680,120],
		steps:5, haslrbtn:true,
		lazyDataType: 'img'
	}">
    <span class="prev ">&lsaquo; 上一页</span>
    <span class="next">下一页 &rsaquo;</span>
    <div class="scroller">
        <div class="switchable-content">
            <!-- 1-5 -->
            <img alt="" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg"/>
            <!-- 5-10 -->
            <img alt="" img-lazyload="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg"/>
            <img alt="" img-lazyload="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg"/>
            <img alt="" img-lazyload="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg"/>
            <img alt="" img-lazyload="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg"/>
            <img alt="" img-lazyload="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg"/>
            <!-- 10-15 -->
            <img alt="" img-lazyload="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg"/>
            <img alt="" img-lazyload="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg"/>
            <img alt="" img-lazyload="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg"/>
            <img alt="" img-lazyload="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"/>
            <img alt="" img-lazyload="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg"/>
        </div>
        <ul class="switchable-triggerBox">
            <li class="active">&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
    </div>
</div>




<div class="code" style="margin-top:20px;">
    <h2>Dom code:</h2>
    <pre>
&lt;div class="section scrollable Auto_Widget" data-widget-type="Switchable" data-widget-config="{
		effect:'scrolly',
		viewSize:[680,120],
		steps:5,
		haslrbtn:true,
		lazyDataType:'img'     (注意最后一个参数的结尾不要有","号，兼容IE.)
		}"&gt;
    &lt;span class="prev "&gt;&lsaquo; 上一页&lt;/span&gt;
    &lt;span class="next"&gt;下一页 &rsaquo;&lt;/span&gt;
    &lt;div class="scroller"&gt;
        &lt;div class="switchable-content"&gt;
				&lt;!-- 1-5 --&gt;
				&lt;img alt="" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg"/&gt;
				&lt;img alt="" src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg"/&gt;
				&lt;img alt="" src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg"/&gt;
				&lt;img alt="" src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg"/&gt;
				&lt;img alt="" src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg"/&gt;
				&lt;!-- 5-10 --&gt;
				&lt;img alt="" img-lazyload="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg"/&gt;
				&lt;!-- 10-15 --&gt;
				&lt;img alt="" img-lazyload="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"/&gt;
				&lt;img alt="" img-lazyload="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg"/&gt;
        &lt;/div&gt;
        &lt;ul class="switchable-triggerBox"&gt;
				&lt;li class="active"&gt;&bull;&lt;/li&gt;
				&lt;li&gt;&bull;&lt;/li&gt;
				&lt;li&gt;&bull;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
</div>

<div class="code" style="margin-top:20px;">
    <h2>Css code:</h2>
<pre>
.scrollable {
        position: relative;
        width: 820px;
    }
.scrollable .prev, .scrollable .next {
        position: absolute;
        top: 50px;
        color: #666;
        cursor: pointer;
    }
.scrollable .prev { left: 10px; }
.scrollable .next { right: 10px; }
.scrollable .disable { color: #ddd; cursor: default; }
.scrollable .switchable-triggerBox {
        position: absolute;
        right: 30px;
        top: -10px;
    }
.scrollable .switchable-triggerBox li {
        float: left;
        padding: 5px;
        font-size: 18px;
        cursor: pointer;
    }
.scrollable .switchable-triggerBox li.active {
        color: #C8282B;
    }
.scroller {
        position: relative;
        width: 680px;
        height: 120px;
        border: 1px solid #ccc;
        background-color: #F9F9F9;
        margin: auto;
        overflow: hidden;
    }
.scroller .switchable-content img {
        float: left;
        width: 100px;
        height: 75px;
        padding: 2px;
        margin: 20px 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline !important; /* fix ie6 双边距 bug */
    }
</pre>
</div>
</body>
</html>
